<template>
    <div>
        <div class="content">
            <vxe-form :data="formData" :items="formItems" titleColon></vxe-form>
        </div>
        <el-card style="overflow: auto">
            <el-tabs v-model="activeName">
                <el-tab-pane name="className" label="给分页附加 className">
                    <monaco-editor v-model="formData.className" :height="paneHeight" language="javascript" />
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from "vue";
    import { MonacoEditor } from "@/components/MonacoEditor";
    import { pageFormDataDefault } from "./propsDefault";
    const activeName = ref("className");
    defineProps({
        formData: {
            type: Object,
            default: pageFormDataDefault,
        },
    });
    const paneHeight = ref(document.documentElement.scrollHeight - 530 + "px");

    const formItems = reactive([
        { field: "layouts", title: "自定义布局", span: 8, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "currentPage", title: "当前页", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入", type: "number", min: 1 } } },
        { field: "pageSize", title: "每页大小", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入", type: "number", min: 1 } } },
        { field: "pagerCount", title: "显示页码按钮的数量", span: 4, itemRender: { name: "$input", props: { placeholder: "请输入", type: "number", min: 1 } } },
        { field: "pageSizes", title: "每页大小选项列表", span: 8, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        {
            field: "align",
            title: "对齐方式",
            span: 4,
            itemRender: {
                name: "$select",
                options: [
                    { value: "left", label: "左对齐" },
                    { value: "center", label: "居中对齐" },
                    { value: "right", label: "右对齐" },
                ],
                props: { placeholder: "请选择" },
            },
        },
        {
            field: "border",
            title: "带边框",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "background",
            title: "带背景颜色",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "perfect",
            title: "配套的样式",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        {
            field: "autoHidden",
            title: "当只有一页时自动隐藏",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        { field: "iconPrevPage", title: "自定义上一页图标", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "iconJumpPrev", title: "自定义向上跳页图标", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "iconJumpNext", title: "自定义向下跳页图标", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "iconnextPage", title: "自定义下一页图标", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        { field: "iconJumpMore", title: "自定义跳页显示图标", span: 6, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
        {
            field: "enabled",
            title: "是否启用",
            span: 4,
            itemRender: {
                name: "$radio",
                options: [
                    { label: "是", value: true },
                    { label: "否", value: false },
                ],
            },
        },
        // { field: "className", title: "给分页附加 className", span: 8, itemRender: { name: "$input", props: { placeholder: "请输入" } } },
    ]);
</script>
<style scoped>
    .content {
        padding: 10px;
        box-shadow: var(--el-box-shadow-light);
        border-radius: var(--el-card-border-radius);
        border: 1px solid var(--el-card-border-color);
        background-color: var(--el-card-bg-color);
        overflow: hidden;
        color: var(--el-text-color-primary);
        transition: var(--el-transition-duration);
    }
</style>
